<template>
  <Card
    title="垃圾箱"
    :bordered="false"
    :head-style="{ padding: '0' }"
    :body-style="{ padding: '10px 0' }"
    v-loading="loading"
  >
    <div style="background-color: #e7eff6" class="flex justify-start gap-2 p-8px">
      <Button type="primary" @click="handleRefresh">
        <template #icon>
          <RedoOutlined />
        </template>
        刷新
      </Button>
      <Button @click="handleDeleteBatch">
        <template #icon>
          <DeleteOutlined style="color: red" />
        </template>
        删除
      </Button>
      <Button type="primary" @click="handleTransmit">
        <template #icon>
          <SendOutlined />
        </template>
        转发
      </Button>
      <Button type="primary" @click="handleRecovery">
        <template #icon>
          <RetweetOutlined />
        </template>
        恢复
      </Button>
    </div>
    <BasicTable @register="registerTable" class="custom-table">
      <!-- <template #toolbar> </template> -->
      <template #form-kind="{ model, field }">
        <Input v-model:value="model['what']" placeholder="请输入" allowClear>
          <template #addonBefore>
            按
            <Select
              :options="byOptions"
              v-model:value="model[field]"
              style="width: 100px; margin-left: 5px"
              placeholder="请选择"
              allowClear
            />
          </template>
        </Input>
      </template>
      <template #title="{ text, record }">
        <a-button type="link" @click="handleView(record)">
          {{ text }}
        </a-button>
      </template>
    </BasicTable>
  </Card>
</template>
<script lang="ts">
  import { defineComponent, h, ref, inject } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { columns, searchFormSchema, byOptions } from './garbageBinboxList.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useModal } from '/@/components/Modal';
  import { Card, Input, Select, Button } from 'ant-design-vue';
  import {
    getMessage_oaListCycle,
    getMessage_oaDel,
    getMessage_oaRestore,
  } from '/@/api/email/email';
  import {
    RedoOutlined,
    DeleteOutlined,
    SendOutlined,
    RetweetOutlined,
  } from '@ant-design/icons-vue';

  export default defineComponent({
    name: 'GarbageBinboxList',
    components: {
      BasicTable,
      Card,
      Input,
      Select,
      Button,
      RedoOutlined,
      DeleteOutlined,
      SendOutlined,
      RetweetOutlined,
    },
    emits: ['handle-transmit', 'handle-view'],
    setup(_, { emit }) {
      const loading = ref(false);
      const { createMessage, createConfirm } = useMessage();
      const internalEmail = inject('internalEmail') as any;
      const [registerTable, { reload, getSelectRowKeys, getSelectRows }] = useTable({
        title: '',
        api: getMessage_oaListCycle,
        columns,
        formConfig: {
          labelWidth: 0,
          schemas: searchFormSchema,
          autoSubmitOnEnter: true,
          actionColOptions: {
            sm: 8,
            md: 8,
            lg: 6,
            xl: 5,
            xxl: 3,
          },
        },
        searchInfo: {
          action: 'search',
        }, //额外的参数
        beforeFetch: (info) => {
          if (internalEmail.emailType.value == 2) {
            info.isDept = true;
          }
          return info;
        },
        rowSelection: {
          type: 'checkbox',
          columnWidth: 40,
        },
        clickToRowSelect: false,
        useSearchForm: true,
        showTableSetting: false,
        bordered: true,
        canResize: false,
        indexColumnProps: { width: 50 },
        showIndexColumn: true,
        rowKey: 'id',
      });

      async function handleDelete(record: Recordable) {
        try {
          loading.value = true;
          await getMessage_oaDel({ ids: record.id });
          handleSuccess();
        } catch (error) {
        } finally {
          loading.value = false;
        }
      }

      async function handleDeleteBatch() {
        let checkes = getSelectRowKeys();
        if (checkes.length == 0) {
          createMessage.warn('删除数据不能为空');
          return;
        }

        createConfirm({
          iconType: 'warning',
          title: () => h('span', '您确定删除么？'),
          onOk: async () => {
            let ids = checkes.join(',');
            try {
              loading.value = true;
              await getMessage_oaDel({ ids: ids });
              handleSuccess();
            } catch (error) {
            } finally {
              loading.value = false;
            }
          },
        });
      }
      function handleSuccess() {
        reload();
      }

      const [registerModal, { openModal }] = useModal();

      function handleSync() {
        let checkes = getSelectRowKeys();
        if (checkes.length == 0) {
          createMessage.warn('请选择同步数据');
          return;
        }
        const moduleCodes = checkes.join(',');
        openModal(true, {
          isUpdate: false,
          record: {
            moduleCodes,
          },
        });
      }
      function handleView(record: Recordable) {
        emit('handle-view', record);
      }

      //刷新
      const handleRefresh = () => {
        reload();
      };

      //转发
      const handleTransmit = () => {
        const data = getSelectRows();
        if (data.length != 1) {
          createMessage.warn('请选择一条数据');
          return;
        }
        emit('handle-transmit', data[0]);
      };

      //恢复
      const handleRecovery = async (record) => {
        let checkes = getSelectRowKeys();
        if (checkes.length == 0) {
          createMessage.warn('请选择数据');
          return;
        }
        const ids = checkes.join(',');
        try {
          loading.value = true;
          await getMessage_oaRestore({ ids: ids });
          createMessage.success('操作成功');
          handleRefresh();
        } finally {
          loading.value = false;
        }
      };
      return {
        registerTable,
        handleSync,
        handleDelete,
        handleSuccess,
        handleDeleteBatch,
        registerModal,
        handleView,
        handleRecovery,
        handleRefresh,
        handleTransmit,
        loading,
        byOptions,
      };
    },
  });
</script>

<style lang="less" scoped>
  :deep(.ant-card-head-title) {
    padding: 8px 8px 0;
  }
  .custom-table {
    padding: 0;
    :deep(.ant-table-wrapper) {
      padding: 0;
    }
  }
  :deep(.ant-form) {
    padding: 10px 0 5px;
    margin-bottom: 0;
  }
</style>
